<template>
	<view class="add-bank">
		<view class="form-box">
			<u--form ref="uForm" :model="form" :rules="rules" labelPosition="left" labelWidth="136rpx">
				<picker :value="bankIndex" :range="bankArray" @change="bankChange">
					<u-form-item label="所属银行" prop="bank_name">
						<u--input v-model="form.bank_name" placeholder="请选择" border="none" disabled disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</picker>
				<u-form-item label="银行账号" prop="card_no">
					<u--input v-model="form.card_no" type="number" placeholder="请填写银行卡号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="个人姓名" prop="name">
					<u--input v-model="form.name" placeholder="请输入真实姓名" border="none"></u--input>
				</u-form-item>
				<!-- <u-form-item label="证件号" prop="idcard">
					<u--input v-model="form.idcard" type="idcard" placeholder="请输入身份证号" border="none"></u--input>
				</u-form-item> -->
				<u-form-item label="手机号" prop="mobile">
					<u--input v-model="form.mobile" type="tel" placeholder="请填写银行预留手机号" border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="protocol-box">
			<view class="protocol-radio" :class="{ active: protocol }" @click="protocol = !protocol">
				<view class="checkbox"></view>
				<view class="text">
					我已阅读并同意
					<text class="link" @click.stop="goProtocol(2)">《用户服务协议》</text>、
					<text class="link" @click.stop="goProtocol(1)">《隐私政策》</text>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<button class="btn" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import { setBankCard } from '@/api/api'
	
	export default {
		data () {
			return {
				form: {
					bank_name: '',
					card_no: '',
					name: '',
					mobile: '',
				},
				rules: {
					bank_name: { required: true, message: '请选择所属银行', trigger: 'blur' },
					card_no: { required: true, message: '请填写银行卡号', trigger: 'blur' },
					name: { required: true, message: '请输入真实姓名', trigger: 'blur' },
					// idcard: { required: true, message: '请输入身份证号', trigger: 'blur' },
					mobile: [
						{required: true, message: '请输入 11 位手机号', trigger: 'blur'},
						{ validator: (rule, value, callback) => { return uni.$u.test.mobile(value) },
							message: '手机号码不正确',
							trigger: 'blur',
						}
					],
				},
				bankIndex: 0,
				bankArray: [
					'中国工商银行',
					'中国农业银行',
					'中国银行',
					'中国建设银行',
					'交通银行',
					'中信银行',
					'中国光大银行',
					'华夏银行',
					'广发银行',
					'招商银行',
					'兴业银行',
					'上海浦东发展银行',
					'平安银行',
					'中国邮政储蓄银行',
					'莱商银行',
					'天津银行',
					'上海银行',
					'江苏银行',
					'重庆银行',
					'蒙商银行',
					'盛京银行',
					'大连银行',
					'哈尔滨银行',
					'南京银行',
					'杭州银行',
					'宁波银行',
					'浙江民泰商业银行',
					'泉州银行',
					'齐鲁银行',
					'青岛银行',
					'临商银行',
					'汉口银行',
					'广州银行',
					'东莞银行',
					'乌鲁木齐银行',
					'浙商银行',
					'渤海银行',
					'北京农商银行',
					'上海农商银行',
					'青海银行',
					'甘肃银行',
					'贵州银行',
					'绵州银行',
					'日照银行',
					'河北银行',
					'潍坊银行',
					'威海市商业银行',
					'贵阳银行',
					'宁夏银行',
					'无锡农商行',
					'广州农商行',
					'珠海华润银行',
					'江西银行',
					'众邦银行',
				],
				
				protocol: false,
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad () {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('onBank', (data) => {
				this.form = data
			})
		},
		methods: {
			bankChange (e) {
				const index = e.detail.value
				this.form.bank_name = this.bankArray[index]
			},
			submit () {
				if (!this.protocol) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					})
					return
				}
				
				this.$refs.uForm.validate().then(valid => {
					if (valid) {
						uni.showLoading({ mask: true })
						setBankCard(this.form).then(res => {
							uni.hideLoading({ noConflict: true })
							if (res) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								
								setTimeout(() => {
									uni.navigateBack()
								}, 500)
							}
						})
					}
				}).catch(errors => {
					console.log('loginSubmit errors');
				})
			},
			goProtocol (type) {
				uni.navigateTo({
					url: '/pages/login/protocol?type=' + type
				})
			},
		}
	}
</script>

<style lang="scss">
.add-bank {
	box-sizing: border-box;
	padding-top: 26rpx;
	min-height: 100%;
	background-color: $bg-color;
	.form-box {
		padding: 0 32rpx;
		background-color: #fff;
	}
	.protocol-box {
		padding: 34rpx;
	}
	.btn-box {
		padding: 0 34rpx;
		.btn {
			border-radius: 90rpx;
			color: #fff;
			line-height: 90rpx;
			background-color: #5749f7;
		}
	}
}
</style>
